﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>QuarkDoc</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!-- Extra details for Live View on GitHub Pages -->
    <!-- Canonical SEO -->
    <link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard-pro" />
    <!--  Social tags      -->
    <meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, material design, material dashboard bootstrap 4 dashboard">
    <meta name="description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.">
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="Material Dashboard PRO by Creative Tim">
    <meta itemprop="description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.">

    <meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg">
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="product">
    @*<meta name="twitter:site" content="@creativetim">*@
    <meta name="twitter:title" content="Material Dashboard PRO by Creative Tim">
    <meta name="twitter:description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.">
    @*<meta name="twitter:creator" content="@creativetim">*@
    <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg">
    <!-- Open Graph data -->
    <meta property="fb:app_id" content="655968634437471">
    <meta property="og:title" content="Material Dashboard PRO by Creative Tim" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="http://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html" />
    <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg" />
    <meta property="og:description" content="Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design." />
    <meta property="og:site_name" content="Creative Tim" />
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <!-- CSS Files -->
    <link href="~/Assets/Style/material-dashboard.min.css" rel="stylesheet" />
    <script src="~/Assets/Script/core/vue.js"></script>
</head>
<body>
    <input type="hidden" id="pcode" value="@ViewData["ApplicationId"]" />
    <div class="wrapper ">
        <div style="padding-bottom:100px;">
            <div class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
                <div class="">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="/Home">
                                <i class="material-icons">dashboard</i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/Document?pcode=@ViewData["ApplicationId"]">
                                <i class="material-icons">code</i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="" data-toggle="modal" data-target="#newModal">
                                <i class="material-icons">add</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header card-header-rose card-header-icon">
                                <div class="card-icon">
                                    <i class="material-icons">assignment</i>
                                </div>
                                <h4 class="card-title">目录管理</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table" id="directoriesTab">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>目录名</th>
                                                <th>添加时间</th>
                                                <th>上级</th>
                                                <th>排序</th>
                                                <th class="text-right">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-bind:id="entity.Id" v-for="entity in entities">
                                                <td>{{ entity.Id}}</td>
                                                <td>{{ entity.DirectoryName}}</td>
                                                <td>{{ entity.CreateTime | formatDate}}</td>
                                                <td>{{ entity.DirectoryId}}</td>
                                                <td>{{ entity.Sort}}</td>
                                                <td class="td-actions text-right">
                                                    <button type="button" class="btn btn-success" v-bind:value="entity.Id" v-on:click="Edit($event)">
                                                        <i class="material-icons">edit</i>
                                                    </button>
                                                    <button type="button" class="btn btn-danger">
                                                        <i class="material-icons">close</i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Classic Modal -->
    <div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建目录</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="material-icons">clear</i>
                    </button>
                </div>
                <form id="NewDirectoriesForm" method="post" action="">
                    <div class="modal-body">
                        <p>
                            序号:(可选)默认是99，数字越小越靠前。
                        </p>
                        <div class="form-group bmd-form-group is-filled">
                            <div class="card-body ">
                                <div class="form-group">
                                    <label for="projectName" class="bmd-label-floating"> 目录名 *</label>
                                    <input type="text" class="form-control valid" id="directoryName" name="directoryName" required="true" maxlength="20">
                                </div>
                                <div class="form-group">
                                    <label for="description" class="bmd-label-floating"> 序号</label>
                                    <input type="text" class="form-control" id="sort" name="sort" maxlength="5">
                                </div>
                                <div class="form-group">
                                    <select id="directoryId" name="directoryId" class="btn btn-danger  btn-round col-12">
                                        <option value="0" selected>无目录</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-link">Lets Go</button>
                        <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Close</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改目录</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="material-icons">clear</i>
                    </button>
                </div>
                <form id="EditDirectoriesForm" method="post" action="">
                    <div class="modal-body">
                        <p>
                            序号:(可选)默认是99，数字越小越靠前。
                        </p>
                        <div class="form-group bmd-form-group is-filled is-focused">
                            <div class="card-body ">
                                <div class="form-group">
                                    <label for="projectName" class="bmd-label-floating"> 目录名 *</label>
                                    <input type="text" class="form-control valid" id="directoryName_edit" name="directoryName_edit" required="true" maxlength="20">
                                </div>
                                <div class="form-group">
                                    <label for="description" class="bmd-label-floating"> 序号</label>
                                    <input type="text" class="form-control" id="sort_edit" name="sort_edit" maxlength="5">
                                </div>
                                <div class="form-group">
                                    <select id="directoryId_edit" name="directoryId_edit" class="btn btn-danger  btn-round col-12">
                                        <option value="0" selected>无目录</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-link">Lets Go</button>
                        <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Close</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!--  End Modal -->
    <!--   Core JS Files   -->
    <script src="~/Assets/Script/core/jquery.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/core/popper.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/core/bootstrap-material-design.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/plugins/perfect-scrollbar.jquery.min.js"></script>
    <!-- Plugin for the momentJs  -->
    <script src="~/Assets/Script/plugins/moment.min.js"></script>
    <!--  Plugin for Sweet Alert -->
    <script src="~/Assets/Script/plugins/sweetalert2.js"></script>
    <!-- Forms Validations Plugin -->
    <script src="~/Assets/Script/plugins/jquery.validate.min.js"></script>
    <!--  Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
    <script src="~/Assets/Script/plugins/perfect-scrollbar.jquery.min.js"></script>
    <!--	Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
    <script src="~/Assets/Script/plugins/bootstrap-selectpicker.js"></script>
    <!--  Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
    <script src="~/Assets/Script/plugins/bootstrap-datetimepicker.min.js"></script>
    <!--  DataTables.net Plugin, full documentation here: https://datatables.net/    -->
    <script src="~/Assets/Script/plugins/jquery.dataTables.min.js"></script>
    <!--	Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs  -->
    <script src="~/Assets/Script/plugins/bootstrap-tagsinput.js"></script>
    <!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
    <script src="~/Assets/Script/plugins/jasny-bootstrap.min.js"></script>
    <!--  Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar    -->
    <script src="~/Assets/Script/plugins/fullcalendar.min.js"></script>
    <!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
    <script src="~/Assets/Script/plugins/jquery-jvectormap.js"></script>
    <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
    <script src="~/Assets/Script/plugins/nouislider.min.js"></script>
    <!-- Library for adding dinamically elements -->
    <script src="~/Assets/Script/plugins/arrive.min.js"></script>
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!--  Notifications Plugin    -->
    <script src="~/Assets/Script/plugins/bootstrap-notify.js"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="~/Assets/Script/material-dashboard.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/QDocFramework.js"></script>
    <script>
        var editId;
        var directoriesTool = new Vue({
            el: '#directoriesTab',
            data: {
                entities: []
            },
            methods: {
                FindDirectories: function () {
                    var _self = this;
                    var pcode = $("#pcode").val();
                    $.ajax({
                        type: "POST",
                        url: "/Application/FindDirectories",
                        data: { pcode: pcode },
                        success: function (result) {
                            _self.entities = $.parseJSON(result).entities;
                            for (var i = 0; i < _self.entities.length; i++) {
                                if (_self.entities[i].DirectoryId == "0") {
                                    $("#directoryId").append("<option value='" + _self.entities[i].Id + "'>" + _self.entities[i].DirectoryName + "</option>");
                                    $("#directoryId_edit").append("<option value='" + _self.entities[i].Id + "'>" + _self.entities[i].DirectoryName + "</option>");
                                }
                            }
                        }
                    });
                }, Edit: function (e) {
                    editId = e.currentTarget.value;
                    $("#directoryName_edit").val($("#" + editId).find("td").eq(1).text());
                    $("#sort_edit").val($("#" + editId).find("td").eq(4).text());
                    $("#directoryId_edit").val($("#" + editId).find("td").eq(3).text());
                    $("#editModal").modal('show');
                }
            },
            filters: {
                formatDate: function (timeSpan) {
                    var timeSpan = timeSpan.replace('Date', '').replace('(', '').replace(')', '').replace(/\//g, '');
                    var d = new Date(parseInt(timeSpan));
                    return d;

                }
            }
        });

        $(document).ready(function () {
            directoriesTool.FindDirectories();
            var validator = $("#NewDirectoriesForm").validate({
                submitHandler: function () {
                    NewDirectories();
                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
                    $(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
                },
                success: function (element) {
                    $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
                    $(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
                },
                errorPlacement: function (error, element) {
                    $(element).append(error);
                },
            });
            var validatorEdit = $("#EditDirectoriesForm").validate({
                submitHandler: function () {
                    EditDirectories();
                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
                    $(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
                },
                success: function (element) {
                    $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
                    $(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
                },
                errorPlacement: function (error, element) {
                    $(element).append(error);
                },
            });
        });

        function NewDirectories() {
            var directoryName = $("input[name='directoryName']").val()
            var sort = $("input[name='sort']").val()
            var directoryId = $("#directoryId").val()
            var pcode = $("#pcode").val();
            $.ajax({
                type: "POST",
                url: "/Application/EditDirectories",
                data: { directoryName: directoryName, sort: sort, directoryId: directoryId, pcode: pcode, type: "new" },
                success: function (result) {
                    if (result == "True") {
                        $.sw("success-message", "目录创建成功!", function () {
                            location.reload();
                        });
                    } else {
                        $.sw("error-message", "目录创建失败!", null);
                    }
                }
            });
        };

        function EditDirectories() {
            var directoryName = $("input[name='directoryName_edit']").val()
            var sort = $("input[name='sort_edit']").val()
            var directoryId = $("#directoryId_edit").val()
            var pcode = $("#pcode").val();
            $.ajax({
                type: "POST",
                url: "/Application/EditDirectories",
                data: { directoryName: directoryName, sort: sort, directoryId: directoryId, editId: editId, pcode: pcode, type: "edit" },
                success: function (result) {
                    if (result == "True") {
                        $.sw("success-message", "目录修改成功!", function () {
                            location.reload();
                        });
                    } else {
                        $.sw("error-message", "目录修改失败!", null);
                    }
                }
            });
        }

    </script>
</body>
</html>
